<!-- components/TabSwitcher.vue -->
<template>
  <view class="tab-switcher">
    <view
      v-for="(tab, index) in tabs"
      :key="index"
      class="tab-item"
      :class="{ active: modelValue === index }"
      @click="$emit('update:modelValue', index)"
    >
      {{ tab }}
    </view>
  </view>
</template>

<script setup>
defineProps(['modelValue', 'tabs'])
defineEmits(['update:modelValue'])
</script>

<style scoped>
.tab-switcher {
  display: flex;
  background: #f0f0f0;
  border-radius: 50rpx;
  padding: 6rpx;
  margin-bottom: 30rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 28rpx;
  color: #666;
  border-radius: 44rpx;
  transition: all 0.3s;
}

.tab-item.active {
  background: #007aff;
  color: white;
}
</style>